import React, { useState } from 'react';
import './addlabel.scss'
import { Input } from 'antd';
import type { RadioChangeEvent } from 'antd';
import { Radio } from 'antd';
import * as service from '../../../../../api/tzp'
import {useNavigate } from 'react-router-dom'

function AddLabel(props:any) {
    const [value, setValue] = useState('手动标签');

  const onChange = (e: RadioChangeEvent) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
//   输入框数据
var [text ,setText] = useState('')
var inputtext =(e:any)=>{
    setText(e.target.value)
}

  var addlabel = async()=>{
    var data = new Date()
    var res = await service.add_label({labelname:text,labeltype:value,labelnum:'88',flag:1,time:data})
    console.log(res);
  }
  var navigate = useNavigate() 
  var go =()=>{
    navigate('/index/Label')
  }
    return (
        <div className='addlabel'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 用户标签 / 新建用户标签</div>
                <div className='title-bottom'>新建标签</div>
            </div>
            <div className='addlabel-box'>
                <div className="box_list">
                    <div className="input-box">
                        <span>标签名称</span>
                        <Input placeholder="请输入" style={{width:400}} onChange={(e)=>{inputtext(e)}}/>
                    </div>
                    <div className='label-type'>
                        <span className='txt'>标签类型</span>
                        <Radio.Group onChange={onChange} value={value} >
                            <Radio value={'手动标签'}>手动标签</Radio>
                            <Radio value={'自动标签'}>自动标签</Radio>
                        </Radio.Group>
                    </div>
                    <div className='btn'>
                        <button onClick={()=>{addlabel()}}>提交</button>
                        <button onClick={()=>{go()}}>返回</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default AddLabel;